<template>
  <a-popover
    trigger="click"
    placement="topLeft"
    :overlayClassName="'emoji-popover'"
    v-model:open="visible"
  >
    <template #content>
      <div class="emoji-container">
        <div class="emoji-tabs">
          <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="recent" tab="最近">
              <div class="emoji-grid">
                <span
                  v-for="emoji in recentEmojis"
                  :key="emoji"
                  class="emoji-item"
                  @click="selectEmoji(emoji)"
                >
                  {{ emoji }}
                </span>
              </div>
            </a-tab-pane>
            <a-tab-pane key="faces" tab="表情">
              <div class="emoji-grid">
                <span
                  v-for="emoji in faceEmojis"
                  :key="emoji"
                  class="emoji-item"
                  @click="selectEmoji(emoji)"
                >
                  {{ emoji }}
                </span>
              </div>
            </a-tab-pane>
            <a-tab-pane key="symbols" tab="符号">
              <div class="emoji-grid">
                <span
                  v-for="emoji in symbolEmojis"
                  :key="emoji"
                  class="emoji-item"
                  @click="selectEmoji(emoji)"
                >
                  {{ emoji }}
                </span>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </template>
    <smile-outlined class="toolbar-icon" />
  </a-popover>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { SmileOutlined } from "@ant-design/icons-vue";

const visible = ref(false);
const activeTab = ref("faces");
const recentEmojis = ref<string[]>([]);

// 表情列表
const faceEmojis = [
  "😀",
  "😃",
  "😄",
  "😁",
  "😅",
  "😂",
  "🤣",
  "😊",
  "😇",
  "🙂",
  "🙃",
  "😉",
  "😌",
  "😍",
  "🥰",
  "😘",
  "😗",
  "😙",
  "😚",
  "😋",
  "😛",
  "😝",
  "😜",
  "🤪",
  "🤨",
  "🧐",
  "🤓",
  "😎",
  "🤩",
  "🥳",
  "😏",
  "😒",
  "😔",
  "😟",
  "😕",
];

const symbolEmojis = [
  "❤️",
  "🧡",
  "💛",
  "💚",
  "💙",
  "💜",
  "💖",
  "💔",
  "❣️",
  "💕",
  "💞",
  "💓",
  "💗",
  "💖",
  "💘",
  "💝",
  "💟",
  "☮️",
  "✝️",
  "☪️",
  "🕉️",
  "☸️",
  "✡️",
  "🔯",
  "🕎",
  "☯️",
  "☦️",
  "🛐",
  "⛎",
  "♈️",
  "♉️",
  "♊️",
  "♋️",
  "♌️",
  "♍️",
  "♎️",
];

const emit = defineEmits<{
  (e: "select", emoji: string): void;
}>();

const selectEmoji = (emoji: string) => {
  // 添加到最近使用
  if (!recentEmojis.value.includes(emoji)) {
    recentEmojis.value.unshift(emoji);
    if (recentEmojis.value.length > 24) {
      recentEmojis.value.pop();
    }
  }

  emit("select", emoji);
  visible.value = false;
};
</script>

<style scoped>
.emoji-container {
  width: 300px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
  user-select: none;
}

.toolbar-icon {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s;
}

.emoji-item:hover {
  background-color: #f0f0f0;
}

:deep(.emoji-popover) {
  padding: 0;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 8px;
  padding: 0 8px;
}

.emoji-grid::-webkit-scrollbar {
  width: 6px;
}

.emoji-grid::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.emoji-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
}
</style>
